'use client';
import style from './CheckboxGroup.module.scss';
import { Input } from 'antd';
import { ChangeEvent, FC, useState } from 'react';
import { TFilterCheckBox } from '@/components/shared/Filters/types';
import FilterCheckBox from '@/components/shared/Filters/FilterCheckBox/FilterCheckBox';


const CheckboxGroup:FC<{
  title: string;
  items: TFilterCheckBox[];
  defaultItems: TFilterCheckBox[];
  limit?: number;
  loading?: boolean;
  searchInputPlaceholder?: string;
  onClickCheckbox?: (id: string) => void;
  defaultValue?: string[];
  selected?: Set<string>;
  className?: string;
  name?: string;
}> = ({
  title,
  items,
  defaultItems,
  limit = 5,
  searchInputPlaceholder = 'Поиск...',
  className,
  loading,
  onClickCheckbox,
  selected,
  name,
}) => {
  const [showAll, setShowAll] = useState(false);
  const [searchValue, setSearchValue] = useState('');

  const list = showAll
    ? items.filter((item) => item.text.toLowerCase().includes(searchValue.toLocaleLowerCase()))
    : (defaultItems || items).slice(0, limit);

  const onChangeSearchInput = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };

  return (
    <div>
      <p>{title}</p>

      {showAll && (
        <div>
          <Input
            placeholder={searchInputPlaceholder}
            onChange={onChangeSearchInput}
          />
        </div>
      )}

      <div>
        {list.map((item, index) => (
          <FilterCheckBox
            key={index}
            text={item.text}
            value={item.value}
            endAdornment={item.endAdornment}
            checked={selected?.has(item.value)}
            onCheckedChange={() => onClickCheckbox?.(item.value)}
            name={name}
          />
        ))}
      </div>

      {items.length > limit && (
        <div>
          <button
            //className={style.showAll}
            onClick={() => setShowAll(!showAll)}
          >
            {showAll ? 'Скрыть' : 'Показать все'}
          </button>
        </div>
      )}

    </div>
  );
};

export default CheckboxGroup;
